<nz-card class="m-b-2">
    <!-- seach START -->
    <div class="zdy-seach-wrap">
        <div nz-space class="seach-content">
            <div *nzSpaceItem class="seach-item">
                <label class="seach-label">门店名称</label>
                <div class="seach-control">
                    <input type="text" nz-input placeholder="请输入" nzSize="default" [(ngModel)]="queryForm.storeName">
                </div>
            </div>

            <div *nzSpaceItem class="seach-item">
                <label class="seach-label">userId</label>
                <div class="seach-control">
                    <input type="text" nz-input placeholder="请输入userId" nzSize="default" [(ngModel)]="queryForm.userId">
                </div>
            </div>

            <div *nzSpaceItem class="seach-item">
                <label class="seach-label">昵称</label>
                <div class="seach-control">
                    <input type="text" nz-input placeholder="请输入昵称" nzSize="default" [(ngModel)]="queryForm.name">
                </div>
            </div>

            <div *nzSpaceItem class="seach-item">
                <label class="seach-label">联系方式</label>
                <div class="seach-control">
                    <input type="text" nz-input placeholder="请输入联系方式" nzSize="default" [(ngModel)]="queryForm.phone">
                </div>
            </div>

            <div *nzSpaceItem class="seach-item" [hidden]="!isCollapse">
                <label class="seach-label">门店状态</label>
                <div class="seach-control">
                    <nz-select
                        nzShowSearch
                        nzAllowClear
                        nzMode="multiple"
                        [nzMaxTagCount]="1"
                        nzPlaceHolder="全部"
                        [(ngModel)]="statusSelected"
                        (ngModelChange)="statusChange($event)">
                        <nz-option nzLabel="待完善" nzValue="1"></nz-option>
                        <nz-option nzLabel="待审核" nzValue="2"></nz-option>
                        <nz-option nzLabel="审核通过" nzValue="3"></nz-option>
                        <nz-option nzLabel="审核不通过" nzValue="4"></nz-option>
                        <nz-option nzLabel="暂不认证" nzValue="10"></nz-option>
                        <nz-option nzLabel="审核通过（已读）" nzValue="20"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div *nzSpaceItem class="seach-item" [hidden]="!isCollapse">
                <label class="seach-label">提交入口</label>
                <div class="seach-control">
                    <nz-select
                        nzAllowClear
                        [nzAutoClearSearchValue]="true"
                        [nzMaxTagCount]="1"
                        nzMode="multiple"
                        nzPlaceHolder="请选择提交入口"
                        [(ngModel)]="entranceSelected"
                        (ngModelChange)="entranceChange($event)">
                        <nz-option *ngFor="let item of entranceList" [nzLabel]="item.name" [nzValue]="item.content"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div *nzSpaceItem class="seach-item" [hidden]="!isCollapse">
                <label class="seach-label">账号属性</label>
                <div class="seach-control">
                    <nz-select
                        nzShowSearch
                        nzAllowClear
                        nzPlaceHolder="全部"
                        [(ngModel)]="queryForm.accountType">
                        <nz-option nzLabel="正常" nzValue="0"></nz-option>
                        <nz-option nzLabel="测试" nzValue="1"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div *nzSpaceItem class="seach-item" [hidden]="!isCollapse">
                <label class="seach-label">提交时间</label>
                <div class="seach-control">
                    <nz-range-picker [nzFormat]="'yyyy-MM-dd'" [(ngModel)]="queryForm.dateFormat"></nz-range-picker>
                </div>
            </div>

            <div *nzSpaceItem class="seach-item">
                <button nz-button nzType="primary" (click)="query()" class="m-r-8">查询</button>
                <button nz-button nzType="default" (click)="backList()">重置</button>
                <button nz-button nzType="link" (click)="isCollapse = !isCollapse">
                    {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>
                </button>
            </div>
        </div>
    </div>
    <!-- seach END -->
</nz-card>

<nz-card>
    <!-- Tabel -->
    <main class="pagination-wrap-position">
        <div class="table-wrap">
            <nz-table
                #basicTable
                nzSize="small"
                nzShowSizeChanger
                nzShowQuickJumper
                nzOuterBordered
                [nzScroll]="{ x: '1100px' }"
                [nzFrontPagination]="false"
                [nzLoadingDelay]="100"
                [nzLoading]="tableLoading"
                [nzData]="listOfData?.list"
                [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
                [nzTotal]="listOfData?.total"
                [nzPageIndex]="listOfData?.pageNum"
                [nzPageSize]="listOfData?.pageSize"
                [nzShowTotal]="totalTemplate"
                (nzPageIndexChange)="onPageIndexChange($event)"
                (nzPageSizeChange)="onPageSizeChange($event)"
            >
                <thead>
                    <tr>
                        <th nzAlign="center" nzWidth="120px" nzLeft>ID</th>
                        <th nzAlign="center" nzWidth="120px">userId</th>
                        <th nzAlign="center" nzWidth="300px">关联用户昵称</th>
                        <th nzAlign="center" nzWidth="220px">关联用户</th>
                        <th nzAlign="center" nzWidth="250px">门店名称</th>
                        <th nzAlign="center" nzWidth="260px">门店状态</th>
                        <th nzAlign="center" nzWidth="320px">所在区域</th>
                        <th nzAlign="center" nzWidth="220px">提交入口</th>
                        <th nzAlign="center" nzWidth="120px">账号属性</th>
                        <th nzAlign="center" nzWidth="170px">审核时间</th>
                        <th nzAlign="center" nzWidth="220px">最近提交时间</th>
                        <th nzAlign="center" nzWidth="250px" nzRight>操作</th>
                    </tr>
                </thead>
      
                <tbody>
                    <!-- <tr *ngIf="searchHint && listOfData?.list">
                        <td class="result-wrap" nzAlign="center" colspan="10">
                            <span>搜索 “{{searchName}}”，找到&nbsp;{{ listOfData?.total }}&nbsp;条结果</span>
                            <a nz-button nzType="link" (click)="backList()">返回原列表</a>
                        </td>
                    </tr> -->
                    <tr *ngFor="let data of basicTable.data; let index = index;">
                        <td nzAlign="center" nzLeft>{{ data.id }}</td>
                        <td nzAlign="center">{{ data.userId }}</td>
                        <td nzAlign="center">{{ data.nickname ? data.nickname : '-' }}</td>
                        <td nzAlign="center">{{ data.phone ? data.phone : '-' }}</td>
                        <td nzAlign="center">{{ data.storeName ? data.storeName : '-' }}</td>
                        <td nzAlign="center" class="{{ getStatusColor(data.status) }}">{{ status_to_text(data.status) }}</td>
                        <td nzAlign="center">{{ data.businessArea +  data.businessAddress }}</td>
                        <td nzAlign="center">{{ entranceText(data.cid) }}</td>
                        <td nzAlign="center">
                            <span [ngStyle]="{'color': data.accountType == 0 ? '#67C23A' : '#E6A23C'}">
                                {{ data.accountType == 0 ? '正常' : (data.accountType == 1 ? '测试' : '-') }}
                            </span>
                        </td>
                        <td nzAlign="center">{{ data.auditTime || '-' }}</td>
                        <td nzAlign="center">{{ data.updateTime }}</td>
                        <td nzAlign="center" nzRight>
                            <a nz-button nzType="link" [routerLink]="['/customer/tabs',data.userId,1]" *ngIf="permission.userPermission.has('customer:store:detail')">详情</a>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
      
            <!-- 分页template -->
            <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
        </div>
    </main>
</nz-card>
